<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content" style="background: white;">
			<div style="width:80%;padding-left:15px;display:inline-block;margin-top:15px;text-align: center;">
				<div class="mui-search mui-input-row">
					<input type="search" class="mui-input-clear" id="search" placeholder="电影/电视剧/影人" />
				</div>
			</div>
			<span id="cancel" style="color:#2a7cf8;text-align: center;width:20%;float:right;margin-top:15px;line-height: 30px;font-size: 16px;">取消</span>
			<div id="clear_record" style="padding:5px 15px;font-size: 12px;color:#888;background:#e6e6e6">
				<span>搜索记录</span>
				<span style="color:#2a7cf8;float:right" >清除</span>
			</div>
			<div class="mui-scroll-wrapper" style="top:100px;touch-action: pan-y;">
			    <div class="mui-scroll">
			        <ul id="list" class="mui-table-view">
						<li class="mui-table-view-cell mui-ellipsis" v-for="item in record" @click="openSearchResult(item)">
							{{item}}
						</li>
					</ul>
			    </div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript">
			mui.init();
			var search_record = new Vue({
				el:'#list',
				data:{
					record:[]
				},
				methods:{
					openSearchResult:function(data){
						jonpSearch(data);
					}
				}
			});
			//取消事件
			mui('#cancel')[0].addEventListener('tap',function(){
				mui.back();
			});
			//清除事件
			mui('#clear_record')[0].addEventListener('tap',function(){
				plus.storage.setItem('history','');
				search_record.record = [];//将vue里面的值初始化
			});
			//滚动事件
			mui('.mui-scroll-wrapper').scroll({
				indicators:false 
			});
			//页面初始化
			mui.plusReady(function(){
				if(plus.storage.getItem('history')){
					//页面初始化赋值
					search_record.record=plus.storage.getItem('history').split(',');
				}
			});
			//判断数组是否包含莫个数
			Array.prototype.contains=function(obj){
				var i = this.length;
				while(i--){
					if(this[i]==obj){
						return true;
					}
				}
				return false;
			}
			//返回下标
			Array.prototype.indexOf=function(val){
				for(var i=0;i<this.length;i++){
					if(this[i]==val){
						return i;
					}
				}
				return -1;
			}
			//删除
			Array.prototype.remove=function(val){
				var index = this.indexOf(val);
				if(index>-1){
					this.splice(index,1);
				}
			}
			//添加键盘事件
			document.onkeydown = function(event){
				var e = e||window.event||arguments.caller.arguments[0];
				if(e&&e.keyCode==13){
					//获取搜索的值
					var search_value = eval(document.getElementById('search')).value;
					if(search_record.record.contains(search_value)){
						search_record.record.remove(search_value)
					}
					search_record.record.unshift(search_value);
					plus.storage.setItem('history',search_record.record.toString());
					//跳转到搜索页面
					jonpSearch(search_value);
				}
			}
			//搜索参数
			function jonpSearch(data){
				mui.openWindow({
					id:'search_result',
					url:'./search_result.html',
					extras:{
						value:data
					}
				});
			}
		</script>
	</body>

</html>